import QtQuick 2.15
import QtQuick.Controls 2.15
import Qt5Compat.GraphicalEffects
import "../components"

Rectangle {
    property var theme: p_theme.currentTheme()
    // anchors.fill:parent
    width: parent.width
    height: 400
    property string cat: "ACG"
    property var catList: ["ACG", " 华语 ", " 古风 ", " 欧美 ", " 流行 "]
    property var headerData: ({
            name: '',
            description: "",
            coverImage: null
        })
    property bool load: false

    Component.onCompleted: {
        loadData();
    }
    onCatChanged: {
        loadData();
    }
    function loadData() {
        load = true;
        p_musicRes.getSelectedPlaylists(cat).then(res => {
            load = false;
            songSheetListModel.clear();
            songSheetListModel.append(res);
            headerData = res[0];
        });
    }

    ListModel {
        id: songSheetListModel
    }
    Flickable {
        id: findMusicListFlickable
        anchors.fill: parent
        contentWidth: parent.width
        contentHeight: flow.height
        // ScrollBar.vertical: CScrollBar{}
        property int itemCardWidth: 200
        Flow {
            id: flow
            width: parent.width
            spacing: {
                const iw = findMusicListFlickable.itemCardWidth;
                return (width % iw) / (Math.floor(width / (iw - 1)));
            } // 设置子项之间的间距
            Rectangle {
                id: header
                visible: headerData != null
                width: parent.width
                height: 180
                radius: 20
                scale: headerMouseArea.pressed ? 0.95 : 1

                Behavior on scale {
                    NumberAnimation {}
                }

                RoundedImage {
                    id: h_background_1
                    visible: false
                    size: parent.width
                    heightSize: parent.height
                    source: (headerData !== null && headerData.coverImage !== null) ? `${headerData.coverImage}?param=${60}y${50}` : ''
                    sourceSize: Qt.size(60, 50)
                }
                RoundedImage {
                    id: h_background_2
                    visible: false
                    size: parent.width
                    heightSize: parent.height
                    source: (headerData !== null && headerData.coverImage !== null) ? `${headerData.coverImage}?param=${60}y${50}` : ''
                    sourceSize: Qt.size(60, 50)
                }
                FastBlur {
                    anchors.fill: parent
                    radius: 40
                    source: h_background_1
                    transparentBorder: true
                }
                FastBlur {
                    anchors.fill: parent
                    radius: 90
                    source: h_background_2
                    ColorOverlay {
                        anchors.fill: parent
                        source: parent
                        color: "#4F000000"
                    }
                }
                Item {
                    width: parent.width
                    height: parent.height
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    clip: true
                    // color:'#3f4241'
                    Rectangle {
                        id: headerMask
                        color: "#4F" + theme.subBackgroundColor2
                        anchors.fill: parent
                        radius: 10
                        opacity: headerMouseArea.isHover ? 1 : 0
                        Behavior on opacity {
                            NumberAnimation {}
                        }
                    }
                    RoundedImage {
                        id: headerIconImage
                        size: 160
                        source: (headerData !== null && headerData.coverImage !== null) ? `${headerData.coverImage}?param=${size * 2}y${size * 2}` : ''
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        radius: 10
                    }

                    Item {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: headerIconImage.right
                        anchors.leftMargin: 20
                        width: parent.width - headerIconImage.size - (headerIconImage.anchors.leftMargin * 2) - anchors.leftMargin
                        height: headerIconImage.size
                        Text {
                            id: headerNameText
                            text: headerData.name
                            color: "#fefefd"
                            font.pointSize: 13
                            font.weight: Font.Bold
                        }
                        Text {
                            id: headerIntroduce
                            height: parent.height - headerNameText.contentHeight - 10
                            width: parent.width
                            anchors.top: headerNameText.bottom
                            anchors.topMargin: 10
                            text: headerData.description
                            color: "#fefefd"
                            font.pointSize: 8
                            clip: true
                            elide: Text.ElideRight
                            wrapMode: Text.Wrap
                        }
                    }

                    ToolTipButton {
                        id: playerButton
                        anchors.centerIn: headerIconImage
                        iconSource: "qrc:/icon/player.svg"
                        size: 90
                        scale: headerMouseArea.isHover ? 1 : 0.5
                        iconScale: 0.8
                        opacity: headerMouseArea.isHover ? 1 : 0
                        Behavior on opacity {
                            NumberAnimation {}
                        }
                        Behavior on scale {
                            NumberAnimation {}
                        }
                    }
                    HoverMouseArea {
                        id: headerMouseArea
                        cursorShape: Qt.PointingHandCursor
                        anchors.fill: parent
                        onClicked: {
                            leftContent.toPage("歌单详情", {
                                id: headerData.id
                            });
                        }
                    }
                }
            }

            Item {
                id: catHeader
                width: parent.width
                height: 60
                Rectangle {
                    width: catText.contentWidth + 20
                    height: catText.contentHeight + 10
                    radius: 15
                    border.color: theme.fontColor
                    border.width: 2
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    Text {
                        id: catText
                        color: theme.fontColor
                        font.pointSize: 10
                        anchors.centerIn: parent
                        text: cat
                    }
                }
                Row {
                    id: catListRow
                    anchors.right: parent.right
                    anchors.rightMargin: 4
                    width: 0
                    spacing: 20
                    height: parent.height
                    // Component.onCompleted: {
                    //     let w = 0;
                    //     print(children.length)
                    //     for(let item of children){
                    //         w += item.width + spacing;
                    //         print(w)
                    //     }
                    //     width = w;
                    // }
                    Repeater {
                        model: ListModel {
                            id: catListModel
                            Component.onCompleted: {
                                append(catList.map(e => ({
                                            name: e
                                        })));
                            }
                        }
                        delegate: catListDelegate
                    }

                    Component {
                        id: catListDelegate
                        Rectangle {
                            anchors.verticalCenter: parent.verticalCenter
                            width: children[0].contentWidth + 14
                            height: children[0].contentHeight + 7
                            radius: 10
                            color: if (name == cat)
                                return theme.fontColor
                            else if (catMouseArea.isHover)
                                return "#1f" + theme.subBackgroundColor2
                            else
                                return '#00000000'
                            Text {
                                id: catListWapper
                                anchors.centerIn: parent
                                text: name
                                color: if (name == cat)
                                    return "#fff"
                                else
                                    return theme.fontColor
                                font.pointSize: 10
                                Behavior on color {
                                    ColorAnimation {}
                                }
                            }
                            HoverMouseArea {
                                id: catMouseArea
                                cursorShape: Qt.PointingHandCursor
                                onClicked: {
                                    cat = model.name;
                                }
                            }
                            Behavior on color {
                                ColorAnimation {}
                            }
                            Component.onCompleted: {
                                catListRow.width += width + catListRow.spacing;
                            }
                        }
                    }
                }
            }

            Repeater {
                model: songSheetListModel // 重复创建子项的数量
                delegate: songSheetDelegate
            }
        }
    }
    Loading {
        z: 2
        load: parent.load
    }
    Component {
        id: songSheetDelegate
        Rectangle {
            id: viewDelegateWapper
            visible: show()
            scale: mouseArea.pressed ? 0.95 : 1
            Behavior on scale {
                NumberAnimation {
                    duration: 100
                }
            }
            function show() {
                if (model.index === 0) {
                    return false;
                }
                const rowNum = Math.floor(findMusicListFlickable.width / (width + flow.spacing));
                const itemHieght = height + flow.spacing;
                const h = Math.floor(index / rowNum) * itemHieght + header.height + catHeader.height + (flow.spacing * 2);
                if (h > findMusicListFlickable.contentY + findMusicListFlickable.height + height) {
                    return false;
                }
                return true;
            }
            width: findMusicListFlickable.itemCardWidth
            height: 245
            radius: 13
            color: "#f8f8f8"
            Rectangle {
                id: mask
                color: "#4F" + theme.subBackgroundColor2
                anchors.fill: parent
                radius: 10
                opacity: mouseArea.isHover ? 1 : 0
                // Behavior on opacity {NumberAnimation{}}
            }

            Image {
                id: coverImage
                source: `${model.coverImage}?param=${width * 2}y${height * 2}`
                width: 180
                height: 180
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.topMargin: 10
                anchors.top: parent.top
            }
            Text {
                z: 1
                color: theme.fontColor
                anchors.top: coverImage.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.topMargin: 10
                text: model.name
                font.pointSize: 9
                width: parent.width * 0.9
                lineHeight: 1
                maximumLineCount: 2
                elide: Text.ElideRight
                horizontalAlignment: Text.AlignHCenter
                wrapMode: Text.Wrap
            }

            ToolTipButton {
                id: playerButton
                anchors.horizontalCenter: coverImage.horizontalCenter
                y: (coverImage.height + 10 - size) / 2 + (mouseArea.isHover ? 0 : size / 3)
                iconSource: "qrc:/icon/player.svg"
                size: 80
                scale: mouseArea.isHover ? 1 : 0.4
                iconScale: 0.8
                opacity: mouseArea.isHover ? 1 : 0
                Behavior on opacity {
                    NumberAnimation {}
                }
                Behavior on scale {
                    NumberAnimation {}
                }
                Behavior on y {
                    NumberAnimation {}
                }
            }
            HoverMouseArea {
                id: mouseArea
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor

                onClicked: {
                    leftContent.toPage("歌单详情", {
                        id: model.id
                    });
                }
            }
        }
    }
}
